<template>
  <view class="feedback">
    <view class="feedback-header">
      <image src="/static/setting/setting01.png" mode="scaleToFill" />
    </view>
    <!-- 问题类型 -->
    <view class="feedback-type bgRadius">
      <view class="homeTitle"><text>问题类型</text></view>
      <view class=" flex flex-align flex-line">
        <view class="feedback-type-item flex flex-align flex-center" v-for="(item, index) in feedbackTypes" :key="index" @click="selectType(item)" :class="{'feedback-type-item-active': feedbackType === index}">
          <text>{{ item.type }}</text>
        </view>
      </view>
      
    </view>
    <!-- 问题内容 -->
    <view class="feedback-content bgRadius">
      <view class="feedback-content-item">
        <view class="homeTitle flex flex-align flex-bt">
          <text>问题类型</text>
          <text class="homeTitle-right">{{ feedbackContent.length}}/500</text>
        </view>
        <view class="feedback-content-item-content">
          <textarea class="feedback-content-item-content-textarea" v-model="feedbackContent" placeholder="请输入反馈内容" maxlength="1000" />
        </view>
        <view class="example-body">
        <uni-file-picker 
          v-model="imageValue" 
          :image-styles="imageStyles"
          limit="3"
          fileMediatype="image" 
          mode="grid" 
          @select="select" 
          @delete="deletes"
        >
        <view class="upLoadImg flex flex-center flex-align">
          <view class="example-body__item__image">
            <image src="/static/shop/shop10.png" mode="scaleToFill" />
            <view>上传</view>
          </view>
        </view>
        </uni-file-picker >
			</view>
      </view>
    </view>
    <!-- 联系方式 -->
    <view class="feedback-contact bgRadius">
      <view class="homeTitle"><text>联系方式</text></view>
      <view class="feedback-contact-item">
        <view class="feedback-contact-item-input">
          <input type="text" placeholder="请留下您的手机号，方便我们联系您" />
        </view>
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="feedback-footer">
      <view class="feedback-footer-button" @click="submitFeedback">提交</view>
    </view> 
  </view>
</template>

<script lang="ts" setup>
import { uploadFile } from '@/utils/tools';
import { ref } from 'vue';
const feedbackTypes = [{ type: '我要投诉', id: 0 },{ type: '功能异常', id: 1 },{ type: '体验优化', id: 2 },{ type: '功能建议',
  id: 3 },{ type: '订单问题', id: 4 },{ type: '内容订正', id: 5 },{ type: '页面美化', id: 6 },{type: '其他', id: 7 }]
const feedbackType = ref(0);
const imageValue = ref([]);
const imageStyles={
  with:'180rpx',
  height:'180rpx',
  background:'#F5F6F7',
}
function selectType(item: any) {
  feedbackType.value = item.id;
}
const feedbackContent = ref('');
function submitFeedback() {
  // 提交反馈
  uni.showToast({
    title: '提交反馈',
    icon:'none',
    duration: 2000
  });
}
const select = (e: any) => {
 uploadFile(e.tempFilePaths[0]).then((res:any)=>{
  console.log(res)
 })
}
const deletes = (e: any) => {
  console.log(e)
}
</script>

<style scoped lang="scss">
.feedback {
 .feedback-header{
  image{
    width: 100%;
    
  }
 }
 .feedback-type{
   margin: -140rpx 30rpx 30rpx;padding:10rpx 30rpx 30rpx;position: relative;z-index: 11;
   .feedback-type-item{height: 70rpx;background: #F5F6F7;border-radius: 12rpx;margin-right: 2.5%;margin-bottom: 20rpx;color: #323233;font-size: 28rpx;
  width: 31%;border: 1px solid #F5F6F7;
  }
  .feedback-type-item-active{
  background: #FFE8DD;
  border: 1px solid #FE7431;color: #FE7431;
  }
  .feedback-type-item:nth-child(3n){
  margin-right: 0rpx;
  }
 }
 .feedback-content{
  margin: 0 30rpx 30rpx;padding:10rpx 30rpx 30rpx;position: relative;z-index: 11;
  .homeTitle-right{font-size: 24rpx;font-weight: normal;}
  .feedback-content-item-content-textarea{color: #969799;font-size: 26rpx;}
  .upLoadImg{text-align: center;width: 180rpx;height:180rpx;background: #F5F6F7;
      image{
        width: 70rpx;height: 70rpx;
      }
    }
 }
 .feedback-contact{
  margin: 0 30rpx 30rpx;padding:10rpx 30rpx 30rpx;position: relative;z-index: 11;
  .feedback-contact-item-input{
  input{
    width: 100%;height: 80rpx;font-size: 26rpx;

  }
  
 }
}
.feedback-footer{
  margin: 0 0rpx 30rpx;padding:10rpx 30rpx 30rpx;position: relative;z-index: 11;
 .feedback-footer-button{
  width: 100%;height: 80rpx;background: #FE7431;color: #fff;font-size: 28rpx;text-align: center;line-height: 80rpx;border-radius: 40rpx;
 }
}
}
</style>